<template>
	<div class="shichangjiandu">
		<!-- 办结情况 -->
		<div class="summary data-summary">
			<div class="title flex">
				<div class="title-icon">
					<img src="@/assets/images/shichangjiandu/data-icon.png">
					<span>办结情况</span>
				</div>
				<div class="title-bg">
					<img src="@/assets/images/shichangjiandu/data-bg.png">
				</div>
			</div>
			<div class="summary-content">
				<checked-title fixed="end">
					<template #right>
						<div class="title2 pointer" :class="active == item.value ? 'active' : ''"
							@click="tabChange(item.value)" v-for="(item, index) in tabList" :key="index">
							{{ item.title }}
						</div>
					</template>
				</checked-title>
				<div class="chunk_con_left" id="completionChat" ref="completionChat" style="height: 175px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
import Highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);

import { MarketSurveillanceDB } from '@/api'
export default {
	data() {
		return {
			active: '1',
            tabList: [
                { title: '月', value: '1' },
                { title: '年', value: '2' },
				{ title: '全部', value: '0' },
            ],

			chartData: [],
		}
	},
	mounted() {
		// this.renderChart();
		this.getlist()
	},
	beforeDestroy() {
		this.desHander();
	},
	methods: {
		tabChange(active) {
            this.active = active
            this.getlist()
        },
		//shuju 
		getlist() {
			this.chartData = []
			MarketSurveillanceDB.getOrderStateNum({
				orgId:'1301571732182839297',
                type: this.active,
			}).then((res) => {
				let obj = res.data[0];
				for (let k in obj) {
					if(k== 'wjNum') {
						this.chartData.push(['完结案件数', obj[k]])
					} else {
						this.chartData.push({name:'处理中案件数量',y: obj[k], sliced: true, selected: true})
					}
				}
				this.echarts1()
			}).catch((err) => {
			});
		},
		echarts1() {
			var chart = Highcharts.chart("completionChat", {
				chart: {
					type: "pie",
					backgroundColor: "rgba(0,0,0,0)",
					options3d: {
						enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
						alpha: 65, //图表视图旋转角度
						beta: 0,
					}
				},
				title: {
					text: ""
				},
				legend: {
					layout: "vertical",
					align: "right", //程度标的目标地位
					verticalAlign: "top", //垂直标的目标地位
					x: 0, //间隔x轴的间隔
					y: 0, //间隔Y轴的间隔
					symbolWidth: 10,
					symbolHeight: 10,
					itemMarginTop: 10,
					// data: ["待进场", "施工建设", "验收"],
					itemStyle: {
						color: "#fff",
						fontSize: 14,
						cursor: 'pointer',
					},
					labelFormatter: function () {
						return this.name + "<b>  " + this.y + " 件";
					}
				},
				credits: {
					enabled: false // 禁用版权信息
				},
				tooltip: {
					formatter: function () {
						return (
							" <b> " +
							this.point.name +
							" </b>: " +
							Highcharts.numberFormat(this.percentage, 1) +
							" %   " +
							this.y + "件"
						);
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						// innerSize: 0,
						size: 140,
						depth: 15, //饼图的厚度
						dataLabels: {
							enabled: true, //是否显示饼图的线形tip
							formatter: function () {
									return '<div style="font-size:18px;color:#41C1FF;">'+this.y +'</div>'
											+ "<br>" + 
											'<div style="font-size:14px;color:#fff;">'+this.point.name+'</div>';
							},
							style:{
								textOutline: 'none',
								textAlign:'center'
							}
						}
					}
				},
				colors: [
					"rgba(0, 168, 255, 1)",
					"rgba(0, 228, 247, 1)",
				],
				series: [{
					// name: "工单类型占比",
					// showInLegend: true,
					clockWise: true,
					center: ["50%", "30%"],
					data: this.chartData.reverse(),
					cursor: 'pointer'
				}]
			});
		},
		desHander() {
			let myChart = echarts.init(this.$refs.completionChat);
			myChart.dispose();
		},
	},
};
</script>
<style lang="less" scoped>
.shichangjiandu {
	.summary {
		.title {
			border-bottom: 1px solid rgba(255, 255, 255, 0.4);
			position: relative;
			height: 42px;
			::after {
				content: '';
				height: 1px;
				width: 7px;
				position: absolute;
				left: 0;
				bottom: 0;
				background: #fff;
			}

			.title-icon {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 18px;
				font-weight: bold;
				color: #FFFFFF;

				img {
					width: 42px;
					height: 42px;
				}

				span {
					display: inline-block;
					height: 42px;
					line-height: 42px;
				}
			}

			.title-bg {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				img {
					width: 227px;
					height: 10px;
				}

			}

			>div {
				width: 50%;
			}

		}

		.summary-content {
			width: 100%;
			height: 175px;
			// display: flex;
			// justify-content: space-between;
		}
	}
}
</style>